<template>
<!-- 精选题库 -->
  <div class="interview-skills">
    <div class="hm-mm-top" style='display:flex;justify-content: space-between;'>
      <!-- 左边输入搜索 -->
      <div class="hm-mm-top-left">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="标签名称">
            <el-input v-model="formSearch.tags" placeholder="请输入" style="width:280px"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select v-model="formSearch.province" placeholder="请选择" style="width:280px" @change='provincesOptChange'>
              <el-option v-for="item in provincesOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地区">
            <el-select v-model="formSearch.city" placeholder="请选择" style="width:280px" @change='provincesOptChange'>
              <el-option v-for="item in citysOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="formSearch.shortName" placeholder="" style="width:330px"></el-input>
          </el-form-item>
          <el-form-item label="状态" style="margin-left:28px">
             <el-select v-model="formSearch.state" placeholder="请选择" style="width:280px">
               <el-option label="启用" value="1"></el-option>
               <el-option label="禁用" value="0"></el-option>
             </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click='clearMsg'>清空</el-button>
            <el-button type="primary" @click="SearchOnSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
      <!-- 右边新增用户 -->
      <div class="hm-mm-top-right">
       <el-button type="success" @click="Visible"><i class="el-icon-edit" style="margin-right: 10px;"></i>新增用户</el-button>
      </div>
      <div class="hm-mm-middle">
        <ul>
          <li :class="`add-line ${classAddColor==='全部'?'add-color':''}`" @click="classAddColorfn('全部')">全部</li>
          <li :class="`add-line ${classAddColor==='待审核'?'add-color':''}`" @click="classAddColorfn('待审核')">待审核</li>
          <li :class="`add-line ${classAddColor==='已审核'?'add-color':''}`" @click="classAddColorfn('已审核')">已审核</li>
          <li :class="`${classAddColor==='已拒绝'?'add-color':''}`" @click="classAddColorfn('已拒绝')">已拒绝</li>
        </ul>
      </div><br>
    <el-alert type="info" style="width: 99%;margin: 0 auto;" :closable='false'>
      <i class="el-icon-info"/>&nbsp;&nbsp;共&nbsp;{{DataNum}}&nbsp;条记录
    </el-alert>
    <!-- 列表 -->
    <div class="hm-mm-list" style="width: 100%">
      <el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="请给我一点时间">
        <el-table-column prop="number" label="试题编号"></el-table-column>
        <el-table-column prop="subject" label="学科"></el-table-column>
        <el-table-column prop="catalog" label="目录" width=""></el-table-column>
        <el-table-column prop="questionType" label="题型" width="">
            <template #default="{row}">
              {{row.questionType===2?'多选':'单选'}}
            </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="200px">
            <template #default="{row}">
              <span v-html="row.question"></span>
            </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180px">
            <template #default="{row}">
              {{row.addDate.replace(/T/g,' ').replace(/.000Z/g,'')}}
            </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="">
            <template #default="{row}">
              {{row.difficulty==='1'?'简单':row.difficulty==='2'?'一般':'困难'}}
            </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120px"></el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="">
            <template #default="{row}">
              {{row.chkState===1?'已审核':'已拒绝'}}
            </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width=""></el-table-column>
        <el-table-column prop="creator" label="审核人" width=""></el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="">
            <template #default="{row}">
              {{row.publishState===1?'已发布':'待发布'}}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="220px" align='center' fixed="right">
         <template #default="{row}">
          <el-button type="text" @click='preview(row)'>预览</el-button>
          <el-button type="text" disabled>审核</el-button>
          <el-button type="text" @click='amend(row)'>修改</el-button>
          <el-button type="text" @click="choicePublishfn(row)">{{row.publishState===1?'上架':'下架'}}</el-button>
          <el-button type="text" @click='del(row)'>删除</el-button>
        </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next, sizes, jumper" :total="totalPages" :page-sizes="[5, 10, 20, 50]" style="float: right;margin-right: 10px;margin-top: 20px;"
      @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
    </div>
    <!-- 用户对话框 -->
    <el-dialog :title="title" :visible.sync="articledialogVisible" width="800px" @close='dialogclose'>
      <ul style="display: flex;flex-wrap: wrap;">
        <li style="width: 25%;">【题型】：多选题</li>
        <li style="width: 25%;">【编号】：{{formData.id}}</li>
        <li style="width: 25%;">【难度】：{{formData.difficulty===1?'困难':formData.difficulty===2?'普通':'简单'}}</li>
        <li style="width: 25%;">【标签】：{{formData.tags}}</li>
        <li style="width: 25%;margin-top:20px">【学科】：{{formData.subject}}</li>
        <li style="width: 25%;margin-top:20px">【目录】：{{formData.tags}}</li>
        <li style="width: 25%;margin-top:20px">【方向】：{{formData.direction}}</li>
      </ul>
      <hr style="margin-top:20px;margin-bottom:20px"/>
       <span>【题干】：</span>
       <span style="color:blue" v-html="formData.question"></span><br>
       <span>{{'多选题 选项：（以下选中的选项为正确答案）'}}</span><br><br>
        <el-checkbox v-for="item in formData.options" :key='item.id'>{{item.title}}</el-checkbox>
      <hr style="margin-top:20px;margin-bottom:20px"/>
       <span>【参考答案】：</span>
       <el-button type="danger">视频答案预览</el-button>
      <hr style="margin-top:20px;margin-bottom:20px"/>
       <span>【答案解析】：</span><span v-html="formData.answer"></span>
      <hr style="margin-top:20px;margin-bottom:20px"/>
       <span>【题目备注】：{{formData.remarks}}</span><br><br><br>
       <el-button type="primary" @click="dialogclose">关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { add, update, disabled} from '@/api/hmmm/companys'

import { choice,remove,choicePublish} from '@/api/hmmm/questions'
import DataBar from '@/components/DataBar'

import {provinces,citys} from '@/api/hmmm/citys'
export default {
  created(){
    this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    console.log(this.provincesOptions);
  },
  components:{
    DataBar
  },
  data () {
    return {
      classAddColor:'',
      provincesOptions:provinces(),//省市数据
      citysOptions:[],//城市数据
      formSearch:{
        page:1,
        pagesize:10,
        tags:'',
        province:'',
        city:'',
        shortName:'',
        state:'',
      },
      loading:true,
      DataNum:0,//数据一共多少条
      tableData: [],//列表渲染数据
      totalPages:10,
      pageChange:1,//页数变化
      pagesizeChange:10,//页面尺寸变化
      articledialogVisible:false,//文章弹出对话框
      id:'',
      formData:{
        city:'',
        company:'',
        isFamous:true,
        province:'',
        remarks:'',
        shortName:'',
        tags:'',
      },//用户弹出对话框绑定的数据
      title:'',//用户弹出对话框标题s
      rules:{
        shortName:[
      { required:true,message:'企业简称不能为空',trigger:'blur'},
      ],
        company:[
      { required:true,message:'所属公司不能为空',trigger:'blur'},
      ],
        province:[
      { required:true,message:'请选择省份',trigger:'blur'},
      ],
        tags:[
      { required:true,message:'请输入标签',trigger:'blur'},
      ],
        remarks:[
      { required:true,message:'备注不能为空',trigger:'blur'},
      ],
      },
    }
  },
  methods: {
    //#渲染函数
    async getlist(params){
      this.loading=true
      this.tableData=[]
      const {data}=await choice(params)
      console.log(data);
      this.DataNum=data.counts//数据一共多少条
      this.totalPages=data.pages*this.pagesizeChange
      this.tableData=data.items
      this.loading=false
    },
    //#搜索功能
    //搜索城市change
    provincesOptChange(){
      const res=citys(this.formData.province)
      this.citysOptions=res
      if(this.formData.province)this.$refs.formData.clearValidate(['province'])
    },
    //搜索地区change
    async SearchOnSubmit() {
      this.formSearch.page=this.pageChange
      this.formSearch.pagesize=this.pagesizeChange
      console.log(this.formSearch)
      let newObj = {}
      for (let key in this.formSearch) {
        if (this.formSearch[key]) {
          newObj[key] = this.formSearch[key];
        }
      }
      console.log(newObj)
      try {
        this.getlist(newObj)
      } catch (error) {
        console.log(error);
      }
      this.getlist(this.formSearch)
    },
    clearMsg(){
      this.citysOptions=[]
      this.formSearch={
        page:1,
        pagesize:10,
        tags:'',
        province:'',
        city:'',
        shortName:'',
        state:'',
      }
    },
    async Visible(){
      this.title='创建用户'
      this.articledialogVisible=true
    },
    //#底部页数切换功能
    //页数变化
    handleCurrentChange(value){
      this.pageChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //页面尺寸发生变化
    handleSizeChange(value){
      this.pagesizeChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //#弹出框功能
    //关闭弹出窗口_重置校验
    dialogclose(){
      this.articledialogVisible = false
      this.formData={}
    },
    //#题目预览
    async preview(row){
      this.title='题目预览'
      console.log(row);
      this.formData=row
      this.articledialogVisible = true
    },
    //#删除
    async del(row){
        this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          try {
          await remove(row)
          this.$message.success('删除成功!');
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
          } catch (error) {
          this.$message.error('删除失败!');
            console.log(error);
          }
        }).catch(() => {
          this.$message.info('已取消删除');
        });
    },
    //#上下架按钮
    async choicePublishfn(row){
        this.$confirm(`您确认${row.publishState===0?'上架':'下架'}这道题目吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const mes=row
          mes.publishState=mes.publishState===0?1:0
         try {
           await choicePublish(mes)
           this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
         } catch (error) {
           console.log(error);
         }
        }).catch(() => {
          this.$message.info('已取消删除');
        });
    },
    //#修改
    amend(row){
      console.log(row);
      this.$router.push({
        path:'/questions/new',
        query:{
          id:row.id
        }
      })
    },
    //#点击4个小窗口
    classAddColorfn(value){
      this.classAddColor=value
      if(value==='全部')this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
      if(value==='待审核')this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,chkState:0})
      if(value==='已审核')this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,chkState:1})
      if(value==='已拒绝')this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,chkState:2})
    },
  }
}
</script>

<style scoped lang='scss'>
.interview-skills{
  margin: 0 auto;
  background-color: #fff;
  width: 99%;
  border: 1px solid #d8dce5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  padding-bottom: 80px;
  .hm-mm-list{
    margin-top: 20px;
  }
  .hm-mm-top{
    margin-top: 10px;
    .hm-mm-top-left{
      margin-left: 25px;
    }
  }
  .hm-mm-top-right{
    margin-top: -60px;
    margin-left: 91%;
    margin-bottom: 25px;
  }
  ::v-deep .dialog-footer{
   .el-form-item__content{
    text-align: center;
    margin-right: 100px;
    margin-top: 50px;

   }
  }
  .hm-mm-middle{
    margin-left: 7px;
    ul{
      display: flex;
      width: 260px;
      justify-content: space-between;
      font-size: 13px;
      height: 45px;
      line-height: 45px;
      cursor:pointer;
      border: 1px solid #d8dce5;
      li{
        width: 100%;
        text-align: center;
      }
      .add-line{
      width: 100%;
      border-right: 1px solid #d8dce5;
      }
      .add-color{
        color: #409eff;
      }
      li:hover{
        color: #409eff;
      }
    }
  }
}
</style>

